<template>
    <login v-if="!user.isLogin"></login>
    <div v-else class="body">
        <header id="up">
            <h1>家庭理财管理系统</h1>
        </header>
        <div id="down">
            <div class="menu">
                <el-menu router default-active="/">
                    <template v-for="item in user.menu" :key="item.name">
                        <el-sub-menu v-if="item.children" :index="item.path">
                            <template #title>{{ item.viewName }}</template>
                            <el-menu-item v-for="ii in item.children" :key="ii.name" :index="ii.path">
                                {{ ii.viewName }}
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item v-else :index="item.path">{{ item.viewName }}</el-menu-item>
                    </template>
                </el-menu>
            </div>
            <div class="main">
                <RouterView></RouterView>
            </div>
        </div>
    </div>
</template>



<script setup>
import { ref } from 'vue'
import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
import axios from 'axios';
import useUser from './store/user';
import login from './views/login.vue';

const user = useUser();
const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>